<template>
  <div class="">
    <figcaption style="display: flex">
      <el-menu mode="horizontal" @select="handleSelect">
        <el-submenu index="1" style="font-size='12px'">
          <template slot="title"> {{ kename }} </template>
          <figcaption v-for="item in departments.list" :key="item.id">
            <el-submenu :index="item.name" v-if="item.children">
              <template slot="title">{{ item.name }}</template>
              <el-menu-item
                :index="JSON.stringify({ name: tmp.name, id: tmp.id })"
                v-for="tmp in item.children"
                :key="tmp.id"
                >{{ tmp.name }}</el-menu-item
              >
            </el-submenu>
            <el-menu-item v-else :index=" JSON.stringify({ name: item.name, id: item.id }) ">{{
              item.name
            }}</el-menu-item>
          </figcaption>
        </el-submenu>
      </el-menu>
      <el-input
        v-model="input"
        placeholder="请输入医生姓名"
        style="width: 200px !important; margin-left: 10px; margin-right: 20px"
      ></el-input>
      <el-button type="primary" @click="sousuo">搜索</el-button>
    </figcaption>
    <el-table
      ref="filterTable"
      :data="data.list"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="医生姓名" width="120"></el-table-column>
      <el-table-column label="头像" width="100">
        <template slot-scope="scope">
          <img
            :src="scope.row.avatarUrl"
            alt=""
            style="width: 40px; height: 40px; border-radius: 50%"
          />
        </template>
      </el-table-column>
      <el-table-column label="院区">
        <template slot-scope="scope">
          {{ scope.row.district && scope.row.district.name }}
        </template>
      </el-table-column>
      <el-table-column label="职称">
        <template slot-scope="scope">
          {{ scope.row.job && scope.row.job.name }}
        </template>
      </el-table-column>
      <el-table-column label="科室">
        <template slot-scope="scope">
          {{ scope.row.department? scope.row.department.name: '' }}
        </template>
      </el-table-column>
       <el-table-column
        prop="tag"
        label="标签"
        style="text-align: center; font-size: 3px"
      >
        <template slot-scope="scope">
          <figcaption style="width: 50px">
            <el-tag
              style="margin-top: 10px"
              v-for="a in (scope.row.tags || '').split(',')"
              :key="a"
              size="small"
              :type="scope.row.tags === '' ? 'primary' : 'success'"
              disable-transitions
              >{{ a  }}</el-tag
            >
          </figcaption>
        </template>
      </el-table-column>
      <el-table-column label="医生简介">
        <template slot-scope="scope">
          {{ scope.row.introduction }}
        </template>
      </el-table-column>
       <el-table-column style="text-align: center" label="操作">

        <template slot-scope="scope">
          <figcaption style="display:flex">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
           >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
          </figcaption>
        </template>
      </el-table-column>
    </el-table>
     <figcaption>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="data.pageSize"
        layout="prev, pager, next"
        :total="data.total"
      >
      </el-pagination>
    </figcaption>
  </div>
</template>

<script>
import { getdoctor, getdepartments, doctorname, deletedoctor } from '@/api/hospital'
export default {
  name: '',
  data() {
    return {
      input: '',
      data: '',
      departments: '',
      kename: '请选择科室',
      keid: '',
      delete: '',
    }
  },
  computed: {},
  methods: {
    async sousuo() {
      this.data = await doctorname(this.input)
      console.log(this.data)
    },
    async handleSelect(key, keyPath) {
      console.log(key, keyPath)
      const newkey = JSON.parse(key)
      this.kename = newkey.name
      this.keid = newkey.id
      this.data = await getdoctor(1, 10, this.keid)
      console.log(this.kename, this.keid)
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter()
    },
    formatter(row, column) {
      return row.address
    },
    handleEdit(index, row) {
      this.$router.push({
        name: 'updata',
        params: {
          id: row,
        },
      })
      // console.log(index, row)
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        console.log(index, row.id)
        deletedoctor(row.id).then((data) => {
          this.delete = data
          console.log(this.delete)
        })
        this.data.list = this.data.list.filter(item => {
          return item.id !== row.id
        })
        console.log(this.data)
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    async handleCurrentChange(val) {
      console.log(val)
      this.data = await getdoctor(val, 10)
      console.log(this.data)
    },
  },
  async created() {
    this.data = await getdoctor(1, 10)
    this.departments = await getdepartments()
    console.log(this.data)
    console.log(this.departments)
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
  width: 120px;
  height: 30px;
  line-height: 39px;
}
::v-deep .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 0px;
}
</style>
